<template>
  <div>
    <!--条件筛选-->
    <TopFilter :list="topFilterList" labelWidth="85" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="lxxCheckWorkAttendance"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchApi"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectHandler"
      :isSelectColumn="false"
    >
      <template slot="controls">
        <AjaxButton size="small" type="primary" :click="exportModel">导入模板下载</AjaxButton>
        <UploadFile
          style="margin: 0 10px;"
          :initial-value="form.fileList"
          :isOnlyButton="true"
          :disabled="orderTypeIsSetMeal"
          :limit="99"
          :fileTypes="upload.fileTypes"
          :actionUrl="`${server.DMSCLOUD_REPAIR}/repair/workshopManagement/importAttendancesExcel`"
          @change="handleUploadChange"
          >Excel导入</UploadFile
        >
      </template>
    </FilterTable>
  </div>
</template>

<script>
/**
 * 维护技师考勤表
 * 芦小星
 */
import { dictionary } from '@/utils/dictMixin';
import { getListP, getList, exportClaimModel, uploadExcel } from '@/api/repair/workshopManagement/technicianScheduling/index';
// import { exportClaimModel } from '@/api/repair/workshopManagement/checkWorkAttendance/index';
import { notifyAction, exportExcelFile, isFormEmpty } from '@/utils/index';
import moment from 'moment';
import SERVER from '@/api/server';
export default {
  name: 'lxxCheckWorkAttendance',
  components: {},
  mixins: [dictionary],
  data() {
    return {
      server: SERVER,
      form: {
        fileList: []
      },
      topFilterList: this.createTopFilterList(),
      fetchParams: { xhrAbort: true },
      fetchApi: getListP,
      columns: this.createTableColumns(),
      fileInitalValue: [], // 上传文件
      personList: [],
      upload: {
        fileTypes: ['xls', 'xlsx'],
        limit: 1
      },
      dateTime: moment().format('YYYY-MM-DD'),
      orderTypeIsSetMeal: false,
      tableData: []
    };
  },
  mounted() {
    // 分页
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getPersonList();
  },
  methods: {
    // 技师
    async getPersonList() {
      const res = await getList();
      if (res.resultCode == 200) {
        this.personList = res.data.map(x => ({ value: x.USER_ID, text: `${x.WORKGROUP_NAME} | ${x.EMPLOYEE_NAME}` }));
        this.topFilterList.find(x => x.fieldName == 'id').itemList = this.personList;
      }
    },
    createTopFilterList() {
      return [
        {
          type: 'SELECT',
          label: '维修技师',
          fieldName: 'id',
          itemList: [],
          rules: [{ required: true, message: '请选择维修技师', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '考勤日期',
          fieldName: 'time',
          dateFormat: 'yyyy-MM',
          dateType: 'month',
          initialValue: moment().format('YYYY-MM-DD'),
          rules: [{ required: true, message: '请选择日期', trigger: 'blur' }]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '技师名称',
          dataIndex: 'userName',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '考勤日期',
          showOverflowTooltip: true,
          dataIndex: 'ATT_TIME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '上班时间',
          dataIndex: 'ON_DUTY',
          filterType: 'date-range',
          sorter: true,
          disabled: true,
          filter: true,
          defaultEditable: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '下班时间',
          dataIndex: 'OFF_DUTY',
          showOverflowTooltip: true,
          filterType: 'date-range',
          filter: true,
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '午休时长',
          dataIndex: 'FREE_DUTY',
          showOverflowTooltip: true,
          filterType: 'number',
          filter: true,
          sorter: true
        },
        {
          title: '是否考勤',
          dataIndex: 'IS_VALID',
          showOverflowTooltip: true,
          filterType: 'checkbox',
          filterItems: [
            { text: '是', value: 10041001 },
            { text: '否', value: 10041002 }
          ],
          render: props => {
            return <span>{this.createDictText(props.row.IS_VALID, '1004')}</span>;
          },
          filter: true,
          sorter: true
        }
      ];
    },
    selectHandler(val) {},
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {},
    // 导出模板
    async exportModel() {
      await exportClaimModel().then(res => {
        exportExcelFile(res.data, '技师考勤模板');
      });
    },
    // 导入成功事件
    handleUploadChange(e) {
      console.log('导入文件上传成功', e.length);
      if (e.length > 0) {
        // EP-25574
        notifyAction('导入成功', 'success');
      }

      // this.fileInitalValue.splice(0, 1);
      console.log('this.fileInitalValue', this.form);
      // console.log('导入文件上传成功', e[0].url);
      // this.fileInitalValue = e;
      // let excelData = e[0].url;
      // if (excelData.length) {
      //   // this.formatPartsData(excelData);
      //   // this.handleDetailSelectConfirm(excelData);
      //   notifyAction('导入成功', 'success');
      // }
    },
    importExecl() {
      console.log('导入');
    }
  }
};
</script>

<style lang="less" scoped></style>
